<template>
    <v-container class="flex overflow-auto flex-wrap grow-1">
        <v-hover v-slot="{ hover }" open-delay="100" v-for="(item, index) in menuList" :key="index">
            <v-card draggable @dragstart="onDragStart(item)" @dragover="onDragOver(item, $event)" @drop="onDrop(item)"
                :style="{
                    backgroundColor: hover ? '#ececec' : '#FFFFFF',
                    border: item.__dragOver__ ? '1px solid black' : 'none',
                    transform: hover ? 'translateY(-10px)' : 'translateY(0)',
                }" height="210" style="
                  border: none;
                  box-shadow: none !important;
                  transition: all 0.3s;
                " class="mb-4 w-1/4 cursor-pointer" @click="onNavTo(item)">
                <div class="flex flex-col items-center justify-center w-full h-full">
                    <div class="rounded-full p-4 shadow-lg" style="background-color: grey">
                        <v-icon style="font-size: 64px; color: white">{{ icon }}</v-icon>
                    </div>
                    <v-card-text class="font-weight-medium text-center mt-4 text-subtitle-1 truncate">
                        {{ item.name }}
                    </v-card-text>
                </div>
            </v-card>
        </v-hover>
    </v-container>
</template>

<script>
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
    props: {
        menuList: {
            type: Array,
            default: () => []
        },
        icon: {
            type: String,
            default: ''
        }
    },
    setup(props, { emit }) {
        let dragItem = null

        function onDragStart(item) {
            dragItem = item
        }

        function onDragOver(item, e) {
            props.menuList.forEach(it => {
                it.__dragOver__ = false
            })
            if (dragItem.id !== item.id) {
                e.preventDefault()
                item.__dragOver__ = true
            }
        }

        function onDrop(item) {
            props.menuList.forEach(it => {
                it.__dragOver__ = false
            })
            if (dragItem.id !== item.id) {
                swapProject({
                    fromId: dragItem.id,
                    toId: item.id
                }).then(() => {
                    Object.keys(dragItem).forEach(k => {
                        const bak = dragItem[k]
                        dragItem[k] = item[k]
                        item[k] = bak
                    })

                })
            }
        }

        function onNavTo(item) {
            console.log(item)
            emit('nav-to', item)
        }

        return {
            onDragStart,
            onDragOver,
            onDrop,
            onNavTo
        };
    },
})
</script>

<style scoped></style>